<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <Form>
    <label for="user">click me</label>
    <input style="display: none;" type="file" id="user" class="upload">
  </Form>
  <button onclick=getimage()>get img</button>
  <div class="imageContainer"></div>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

  <script>
    document.querySelector('.upload').onchange=({target:{files}})=>{
      const fd=new FormData()
      fd.append('img',files[0])
      axios({
        url:'http://localhost:3000/upload',
        method:'POST',
        data:fd
      }).then(({data:{message}})=>{alert(message)})
      //   fetch('http://localhost:3000/upload',{
      //     method:'POST',
      //     headers:{'Content-Type':'application/x-www-form-urlencoded'},
      //     body:new URLSearchParams(fd),
      //     mode:'cors'
      //   }).then(response=>{
      //     if(!response.ok){throw new Error(`HTTP错误！状态码:${response.status}`)}
      //     return response.json
      //   }).then(data=>{console.log('请求成功，返回数据:',data);})
      //   .catch(error=>{
      //     console.error('请求失败:',error)
      //   })
    }
    
    const getimage=()=>{
      fetch('http://localhost:3000/api/images').then(response=>response.json()).then(
      images=>{
        images.forEach(img=>{
          // console.log(img);
          const imageUrl='uploads/'+img.image_path
          const imgEle=new Image(200,200)
          imgEle.src=imageUrl
          imgEle.alt=`图片${img.id}`
          document.querySelector('.imageContainer').appendChild(imgEle)
        })
      }
    )
    };
  </script>
</body>
</html>